<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverse() }}</p>
    <p>{{ reverse() }}</p>
    <p>{{ reverse() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello,vue",
    };
  },
  computed: {
    reverseMessage() {
      console.log("reverseMessage");
      return this.msg.split("").reverse().join("");
    },
  },
  methods: {
    reverse() {
      console.log("reverse");
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>